<template>
  <cu-layout :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-checkout_page`]">
      <view class="checkOutDetail" v-for="(item, index) in checkoutList" :key="index">
        <view class="title_line">
          <view class="left_text"> 提交日期：{{ item.create_time.split(' ')[0] }} </view>
          <view class="status_box">{{ item.status == 0 ? '已申请' : item.status == 1 ? '已撤销' : '' }}</view>
        </view>
        <view class="main_box">
          <view class="content_box">
            <view class="line_box">
              <view class="title">租户姓名：</view>
              <view class="main_text">{{ item.name }}</view>
            </view>
            <view class="line_box">
              <view class="title">项目名称：</view>
              <view class="main_text">{{ item.room_info }}</view>
            </view>
            <view class="line_box">
              <view class="title">合同起租日期：</view>
              <view class="main_text">{{ item.begin_date.split(' ')[0] }}</view>
            </view>
            <view class="line_box">
              <view class="title">合同结束日期：</view>
              <view class="main_text">{{ item.end_date.split(' ')[0] }}</view>
            </view>
            <view class="line_box">
              <view class="title">申请退房日期：</view>
              <view class="main_text">{{ item.apply_checkout_date }}</view>
            </view>
            <view class="line_box">
              <view class="title">申请退房原因：</view>
              <view class="main_text">
                {{ item.select_reason_option_input ? item.select_reason_option_input : item.select_reason_option_name }}
              </view>
            </view>
            <view class="line_box" v-if="item.attachment">
              <view class="title">上传附件：</view>
              <uv-image v-for="(img, imgIndex) in item.attachment" :key="imgIndex" width="40px" height="40px" fit="contain" :src="img.url" style="margin-right: 8px" />
            </view>
          </view>
          <view class="btn_box">
            <uv-button type="primary" @click="cancelApplication(item.apply_checkout_id)" v-if="item.can_cancel == 1">撤销申请</uv-button>
          </view>
        </view>
      </view>
      <view class="top_btn" :style="{ paddingBottom: `${buttomSafeArea}px` }">
        <uv-button v-if="ifShowApply" type="primary" @click="applyCheckout" size="large" shape="circle" text="申请退房" />
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { cancelApplicationApi, getCheckoutListApi } from './api'

export default {
  data() {
    return {
      contract_id: '',
      sid: '',
      checkoutList: [],
      ifShowApply: false,
    }
  },
  onLoad(options) {
    this.contract_id = options.contract_id
    this.getCheckoutList()
  },
  computed: {
    safeBottomAreaInsets() {
      return `${this.$Platform.device.safeAreaInsets.bottom + 70}px`
    },
    buttomSafeArea() {
      return this.$Platform.device.safeAreaInsets.bottom || 10
    },
  },
  methods: {
    async getCheckoutList() {
      try {
        let res = await getCheckoutListApi({ contract_id: this.contract_id })
        this.checkoutList = res.data // 获取合同退房进度列表

        let array = this.checkoutList.filter((item) => item.status == 0)
        this.ifShowApply = array.length > 0 ? false : true
      } catch (e) {
        console.error(e)
      }
    },
    cancelApplication(id) {
      uni.$uv.debounce(async () => {
        try {
          let res = await cancelApplicationApi({ apply_checkout_id: id })
          if (res.errcode === 200) {
            uni.showToast({
              title: '撤销成功',
              icon: 'success',
            })
            // 刷新页面
            this.getCheckoutList()
          }
        } catch (e) {
          console.error(e)
        }
      })
    },
    applyCheckout() {
      this.$ROUTE.go('/pages/subpackage/contract/checkOut', { contract_id: this.contract_id })
    },
  },
}
</script>

<style scoped lang="scss">
.#{prefixCls('checkout_page')} {
  width: 100%;
  min-height: 100vh;
  padding: 12px;
  box-sizing: border-box;
  padding-bottom: v-bind(safeBottomAreaInsets);
  .checkOutDetail {
    width: 100%;
    background: #f9f9f9;
    margin-bottom: 20px;
    .title_line {
      width: 100%;
      height: 30px;
      display: flex;
      background: #046f7e;
      line-height: 30px;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;
      box-sizing: border-box;
      .left_text {
        color: #fff;
        font-size: 14px;
      }
      .status_box {
        color: #fff;
        font-weight: bold;
        font-size: 17px;
        margin-right: 4px;
      }
    }
    .main_box {
      border: 1px solid #ccc;
      border-radius: 0 0 20px 20px;
      padding-bottom: 10px;
      border-top: none;

      .content_box {
        padding: 4px;
        font-size: 12px;
        .line_box {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          .title {
            width: 34%;
            text-align: left;
            padding-right: 10px;
          }
          .main_text {
            width: 66%;
            text-align: left;
          }
        }
      }
      .btn_box {
        width: 100%;
        display: flex;
        justify-content: center;
        .uv-button {
          width: 50%;
          height: 30px;
          background: #046f7e;
          color: #fff;
          border: none;
          margin-top: 12px;
          border-radius: 4px;
        }
      }
    }
  }
  .top_btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    z-index: 99;
  }
}
</style>
